<template lang="html">
  <div>
    <page-header title="上下留白" subTitle="用于标准的上下空间留白"></page-header>
    <ui-white-space size="md"></ui-white-space>
    <div class="eg-block"> ui-wing-blank sm</div>
    <ui-white-space size="md"></ui-white-space>
    <div class="eg-block"> ui-wing-blank md</div>
    <ui-white-space size="lg"></ui-white-space>
    <div class="eg-block"> ui-wing-blank lg</div>
    <ui-white-space size="xl"></ui-white-space>
    <div class="eg-block"> ui-wing-blank xl</div>
  </div>
</template>

<script>
import PageHeader from './p-page-header'

export default {
  name: 'demo-white-space',
  components: {
    'page-header': PageHeader
  }
}
</script>

<style lang="css">
.eg-block{
  color: rgb(187, 187, 187);
  text-align: center;
  height: 60px;
  line-height: 60px;
  width: 100%;
  background-color: rgb(235, 235, 239);
}

</style>
